<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

<div>发送消息</div>
<input type="text" id="msgContent"/>
<input type="button" value="点我发送" onclick="CHAT.chat()"/>

<div>接收消息：</div>

<div id="receiveMsg" style="background-color: burlywood;"></div>

<script type="application/javascript">

    window.CHAT = {
        socket:null,
        init:function(){
            if(window.WebSocket){
                CHAT.socket = new WebSocket("ws://localhost:8086/ws");

                CHAT.socket.onopen = function(){
                    console.log("连接创建成功...");
                };
                CHAT.socket.onclose = function(){
                    console.log("连接关闭...");
                };
                CHAT.socket.onerror = function(){
                    console.log("连接发生错误...");
                };
                CHAT.socket.onmessage = function(e){
                    console.log("接收消息:" + e.data);
                    var receiveMsg = document.getElementById("receiveMsg");
                    var html = receiveMsg.innerHTML;
                    receiveMsg.innerHTML = html + "<br />"+e.data;
                }
            }else{
                alert("浏览器不支持webscoket协议。。。")
            }
        },
        chat:function(){
            var msg = document.getElementById("msgContent");
            CHAT.socket.send(msg.value);
        }
    }
    CHAT.init();
</script>

</body>
</html>

